<template>
  <div class="aside-legend">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="图表" name="charts">
        <div class="title">基础图表</div>
        <el-row>
          <el-tooltip v-for='(item, index) in BaseChart' :key="item.chartType+index" v-bind:content='item.title +"\n"+item.desc' placement="bottom" effect="light">
            <el-button  v-bind:icon="item.icon" circle size="small" @click="addChart(item.chartType)"></el-button>
          </el-tooltip>
        </el-row>
        <div class="title">高级图表</div>
        <el-row>
          <el-tooltip v-for='(item, index) in AdvancedChart' :key="item.chartType+index" v-bind:content='item.title +"\n"+item.desc' placement="bottom" effect="light">
            <el-button  v-bind:icon="item.icon" circle size="small" @click="addChart(item.chartType)"></el-button>
          </el-tooltip>
        </el-row>
      </el-collapse-item>

      <el-collapse-item title="图层" name="layer">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </el-collapse-item>

    <el-collapse-item title="历史记录" name="history">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
    </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>

import {BaseChart, AdvancedChart} from '../../assets/js/legend'
import { mapActions } from 'vuex'
export default {
  name: 'AsideLegend',
  data () {
    return {
      activeName: 'charts',
      BaseChart: BaseChart,
      AdvancedChart: AdvancedChart
    }
  },
  methods: {
    ...mapActions('app', { addChart: 'addChart' })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .aside-legend {
 }
 .aside-legend .title{
   text-align: left;
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 3px;
 }
  .aside-legend .el-button--small.is-circle{
    padding: 9px;
    margin: 3px 0px 0px 10px;
    float: left;
  }
</style>
